<template>
	<!-- 订单管理 -->
	<view class="orderManagement-main">
		<!-- 搜索 -->
		<view class="orderManagement-search">
			<view class="orderManagement-search-input">
				<input type="text" style="height: 70rpx; color: #888; font-size: 26rpx" placeholder="请输入订单相关信息搜索" v-model="orderQuery.keyword" />
			</view>
			<view class="orderManagement-search-title" @click="scanTheCode">
				<uni-icons type="scan" size="26" color="#fff"></uni-icons>
			</view>
		</view>

		<!-- 筛选 -->
		<view class="orderManagement-filter">
			<view class="filter-item" v-for="(item, index) in statusList" :key="index" @click="changeStatus(index)">
				<uni-badge class="uni-badge-left-margin" :text="item.badge" absolute="rightTop" size="small">
					<view class="filter-name">
						{{ item.name }}
					</view>
				</uni-badge>
				<view class="filter-border" :class="[statusIndex == index ? 'active' : '']"></view>
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="orderManagement-List" v-if="statusList[statusIndex].orderList.length > 0">
			<!-- 订单项 -->
			<view class="orderManagementItem" v-for="item in statusList[statusIndex].orderList" :key="item.id" @click="gotoOrderInfo(item)">
				<view class="orderManagement-header">
					<view class="timeTags">
						{{ formatTimestampZw(item.createtime) }}
					</view>
					<view class="type">
						<!-- distribution_type  0:物流 1:自提 2:送货上门-->
						<!-- flash_platform 1：达达秒送 0：UU跑腿 -->
						<uni-tag :text="distributionTypeFilter(item.distribution_type)" type="error"></uni-tag>
						<text class="typeTitle">
							{{ statusNameFilter(item.distribution_state) }}
						</text>
					</view>
				</view>

				<view class="orderManagement-siteOrIphone">
					<view class="siteOrIphone-icon">
						<uni-icons type="location" size="22" color="#2979ff"></uni-icons>
					</view>
					<view class="siteOrIphone-info">
						<view class="info-iphone">{{ item.address_info.name }} {{ item.address_info.phone }}</view>
						<view class="info-site">{{ item.address_info.address }}</view>
					</view>
					<view class="siteOrIphone-iphone" @click.stop="openIphone(item.address_info.phone)">
						<view class="iphone-icon">
							<uni-icons type="phone-filled" size="22" color="#42b983"></uni-icons>
						</view>
					</view>
				</view>

				<view class="orderManagement-shopInfo">
					<view class="shopInfoHeader">
						<view class="shopHeaderIcon">
							<uni-icons type="gift" size="22" color="#2979ff"></uni-icons>
						</view>
						<view class="shopHeaderTitle">商品</view>
						<view class="shopHeaderNum">
							共{{ item.goods_info.length }}件商品
							<uni-icons type="right" size="16" color="#999"></uni-icons>
						</view>
					</view>
					<view class="shopInfoItem">
						<view class="title">顾客实付</view>
						<view class="pri" style="font-weight: bold">¥{{ item.price }}</view>
					</view>
				</view>

				<view class="orderManagement-ly">
					<view class="lyHeader">
						<view class="title">订单来源</view>
						<view class="info">{{ storeType == '1' ? '闪电送' : '全国送' }}</view>
					</view>
					<view class="lyItem">
						<view class="title">订单号码</view>
						<view class="info">
							<text>{{ item.order_no }}</text>
							<text class="copy" @click.stop="copyText(item.order_no)">复制</text>
						</view>
					</view>
					<view class="lyItem">
						<view class="title">下单时间</view>
						<view class="info">
							{{ formatTimestamps(item.createtime) }}
						</view>
					</view>
				</view>

				<uni-notice-bar show-icon text="当前为云仓商品,由云仓自行发起配送" v-if="item.goods_info[0].artid" />

				<view class="orderManagement-pd" v-if="!(item.distribution_type == '2' && item.flash_platform)">
					<view class="pd-btn" @click.stop="getCancelOrder(item.id)" v-if="item.status == 1 && item.distribution_state != 5">取消订单</view>
					<view class="pd-btn active" @click.stop="gotoDistributionPreview(item.id)" v-if="storeType == '1' && item.distribution_state == 1 && item.distribution_type != 1">发起派单</view>
					
					<view class="pd-btn active" v-if="storeType == '0' && !item.goods_info[0].artid && item.distribution_type != 1" @click.stop="getOpen(item)">立即发货</view>
					<view class="pd-btn active" v-if="storeType == '1' && item.distribution_type != 1">商家自配</view>
				    
				</view>
			</view>
		</view>

		<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>

		<view style="height: 100rpx; width: 100%"></view>

		<u-popup :show="show" @close="getClose" closeable>
			<view class="materialFlow-main">
				<view class="materialFlow-header">物流配送</view>
				<view class="materialFlow-form">
					<uni-forms :modelValue="formData">
						<uni-forms-item label="选择物流" name="name">
							<uni-data-select v-model="formData.express" :localdata="feedbackType"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="物流单号" name="age">
							<uni-easyinput type="text" v-model="formData.express_no" placeholder="请输入物流单号" />
						</uni-forms-item>
					</uni-forms>
					<button @click="setmaterialFlow" type="default" style="background-color: #2979ff;color: #fff;">发起物流</button>
				</view>
			</view>
		</u-popup>

		<!-- 导航 -->
		<hwxcStoreTabbar />
	</view>
</template>

<script>
import hwxcStoreTabbar from '../../../components/hwxcStoreTabbar/hwxcStoreTabbar.vue';
import { flashManageOrderList, flashManageOrderCancel,storeExpress ,storeExpressSend} from '../../../api/flashManage/index.js';
import { storeselfTake } from '../../../api/payment/index.js';
import { formatTimestamp } from '../../../utils/tools';
export default {
	data() {
		return {
			show: false,
			formData:{
				id:"",
				express_no:'',
				express:'',
				type:''
			},
			feedbackType:[],
			current: 0,
			// 订单参数
			orderQuery: {
				page: 1,
				limit: 10,
				// keyword: '',
				type: 0
			},
			// 筛选状态值
			statusList: [
				{
					name: '全部',
					badge: null,
					orderList: []
				},
				{
					name: '待配送',
					badge: null,
					orderList: []
				},
				{
					name: '配送中',
					badge: null,
					orderList: []
				},
				{
					name: '待收货',
					badge: null,
					orderList: []
				},
				{
					name: '已完成',
					badge: null,
					orderList: []
				}
			],
			// 状态下标
			statusIndex: 0,
			storeType: null
		};
	},

	components: {
		hwxcStoreTabbar
	},

	onShow() {
		this.storeType = this.$store.state.storeType;
		this.getflashManageOrderList();
	},

	methods: {
		gotoPath(path) {
			uni.navigateTo({
				url: path
			});
		},

		// 获取订单列表
		async getflashManageOrderList() {
			try {
				[0, 1, 2, 3, 4].forEach(async (item, index) => {
					const resData = await flashManageOrderList({
						...this.orderQuery,
						type: this.storeType,
						screen: item
					});
					this.statusList[index].orderList = resData.data.data;
					this.statusList[index].badge = resData.data.total;
				});
			} catch (e) {
				throw Error(e);
			}
		},

		// 复制
		async copyText(text) {
			try {
				await uni.setClipboardData({
					data: text
				});
				uni.showToast({
					title: '复制成功',
					icon: 'none',
					duration: 1500
				});
			} catch (e) {
				uni.showToast({
					title: '复制失败',
					icon: 'none',
					duration: 1500
				});
			}
		},

		// 状态值过滤
		statusNameFilter(status) {
			if (!status) {
				return '待发起配送';
			}
			const statusMap = {
				0: '待发货',
				1: '待配送',
				2: '已发货',
				3: '配送中',
				4: '待收货',
				5: '已完成'
			};
			return statusMap[status];
		},

		// 配送方式过滤
		distributionTypeFilter(status) {
			const statusMap = {
				0: '快递配送',
				1: '到店自提',
				2: '送货上门'
			};
			return statusMap[status];
		},

		// 拨打电话
		openIphone(phoneNumber) {
			uni.makePhoneCall({
				phoneNumber
			});
		},

		// 时间格式化
		formatTimestamps(timestamp) {
			return formatTimestamp(timestamp);
		},

		// 时间格式化
		formatTimestampZw(timestamp) {
			// 将时间戳转换为Date对象
			const date = new Date(timestamp * 1000);
			// 获取年份
			const year = date.getFullYear();
			// 获取月份，注意getMonth方法返回值是从0开始计数的，所以要加1
			const month = (date.getMonth() + 1).toString().padStart(2, '0');
			// 获取日期并格式化为两位数
			const day = date.getDate().toString().padStart(2, '0');
			// 获取小时数并格式化为两位数
			const hours = date.getHours().toString().padStart(2, '0');
			// 获取分钟数并格式化为两位数
			const minutes = date.getMinutes().toString().padStart(2, '0');
			// 获取秒钟数并格式化为两位数
			const seconds = date.getSeconds().toString().padStart(2, '0');
			// 拼接成格式化后的时间字符串
			const formattedTime = `${month}月${day}日`;
			return formattedTime;
		},

		// 切换状态
		changeStatus(index) {
			this.statusIndex = index;
		},

		// 取消订单
		getCancelOrder(id) {
			this.getflashManageOrderCancel(id);
		},

		// 取消订单
		async getflashManageOrderCancel(id) {
			uni.showModal({
				title: '提示',
				content: '是否要取消当前订单？',
				success: async (res) => {
					if (res.confirm) {
						try {
							const resData = await flashManageOrderCancel({
								id,
								type: this.storeType
							});
							uni.showToast({
								title: '取消成功',
								icon: 'none'
							});
							await this.getflashManageOrderList();
						} catch (e) {
							throw Error(e);
						}
					}
				}
			});
		},

		// 配送费用预览
		gotoDistributionPreview(id) {
			uni.navigateTo({
				url: `/pages/storeSide/distributionPreview/distributionPreview?id=${id}`
			});
		},

		// 跳转订单详情
		gotoOrderInfo(item) {
			if (!item.distribution_state) {
				return uni.showToast({
					title: '订单未发起配送',
					icon: 'error'
				});
			}

			uni.navigateTo({
				url: `/pages/storeSide/shopOrderInfo/shopOrderInfo?id=${item.id}`
			});
		},

		// 订单销核
		scanTheCode() {
			uni.scanCode({
				onlyFromCamera: true,
				success: async (res) => {
					const resData = await storeselfTake({
						order_no: res.result,
						type: this.$store.state.storeType
					});
					uni.showToast({
						title: '销核成功',
						icon: 'none'
					});
				}
			});
		},

		getClose() {
			this.show = false;
			this.formData = {
				id:'',
				express_no:'',
				express:'',
				type:''
			}
		},

		getOpen(info) {
			this.show = true;
			this.formData.id = info.id;
			this.getstoreExpress();
		},
		
		async getstoreExpress(){
			try{
				const resData = await storeExpress({
					type:this.$store.state.storeType
				})
				const storeExpressList = resData.data;
				 for (let key in storeExpressList) {
				 	this.feedbackType.push({
						value: key,
						text: storeExpressList[key]
					})
				 }
			}catch(e){
				throw Error(e)
			}
		},
		
		// 发起配送
		async setmaterialFlow() {
			try{
				this.formData.type = this.storeType;
				const resData = await storeExpressSend(this.formData);
				if(resData.code == 1){
					uni.showToast({
						title:resData.msg,
						icon:'none',
					})
					this.getClose();
				}
			}catch(e){
				throw Error(e)
			}
		}
	}
};
</script>

<style scoped lang="scss">
@mixin orderDisPlay {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
::v-deep .uni-badge {
	z-index: 99 !important;
}
.orderManagement-main {
	padding-bottom: 50px;
	.orderManagement-search {
		display: flex;
		background-color: #2979ff;
		box-sizing: border-box;
		padding: 20rpx;
		padding-right: 0px;
		.orderManagement-search-input {
			flex: 1;
			background-color: #fff;
			border-radius: 35rpx;
			box-sizing: border-box;
			padding: 0px 30rpx;
		}

		.orderManagement-search-title {
			width: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.orderManagement-filter {
		@include orderDisPlay();
		box-sizing: border-box;
		padding: 0px 30rpx;
		height: 100rpx;
		background-color: #2979ff;
		color: #fff;
		font-size: 26rpx;
		.filter-border {
			width: 100%;
			height: 4rpx;
			background-color: transparent;
			margin-top: 10rpx;
			border-radius: 4rpx;
		}
		.active {
			background-color: #fff;
		}
	}

	.orderManagement-List {
		box-sizing: border-box;
		padding: 20rpx;
		padding-bottom: 0rpx;
		font-size: 28rpx;
		.orderManagementItem {
			background-color: #fff;
			box-sizing: border-box;
			padding: 0px 30rpx;
			border-radius: 24rpx;
			margin-bottom: 20rpx;
			.orderManagement-header {
				@include orderDisPlay();
				height: 90rpx;
				border-bottom: 1px #f3f3f3 solid;
				.timeTags {
					background-color: #2979ff;
					padding: 8rpx 28rpx;
					color: #fff;
					font-size: 26rpx;
					margin-left: -30rpx;
					border-top-right-radius: 30rpx;
					border-bottom-right-radius: 30rpx;
				}

				.type {
					.typeTitle {
						margin-left: 30rpx;
						color: #2979ff;
						font-weight: bold;
					}
				}
			}

			.orderManagement-time {
				@include orderDisPlay();
				height: 90rpx;
				border-bottom: 1px #f3f3f3 solid;
				.timeIcon {
					width: 60rpx;
					margin-top: 3px;
				}
				.timeTitle {
					flex: 1;
				}
				.times {
					width: 360rpx;
					.textColor {
						color: #e6a23c;
					}
				}
			}

			.orderManagement-siteOrIphone {
				@include orderDisPlay();
				height: 140rpx;
				border-bottom: 1px #f3f3f3 solid;
				.siteOrIphone-icon {
					width: 60rpx;
				}
				.siteOrIphone-info {
					flex: 1;
					.info-site {
						color: #999;
						font-size: 24rpx;
						padding: 8rpx;
					}
				}

				.siteOrIphone-iphone {
					margin-left: 20rpx;
					.iphone-icon {
						border: 1px #c9c9c9 solid;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						box-sizing: border-box;
						padding: 10rpx;
					}
				}
			}

			.orderManagement-shopInfo {
				border-bottom: 1px #f3f3f3 solid;
				.shopInfoHeader {
					@include orderDisPlay();
					height: 80rpx;
					.shopHeaderIcon {
						width: 60rpx;
					}
					.shopHeaderTitle {
						flex: 1;
					}
					.shopHeaderNum {
						width: 200rpx;
						color: #999;
						display: flex;
						align-items: center;
						justify-content: flex-end;
					}
				}

				.shopInfoItem {
					@include orderDisPlay();
					height: 80rpx;
					.title {
						color: #999;
					}
					.priColor {
						font-size: 32rpx;
						color: red;
						font-weight: bold;
					}
				}
			}

			.orderManagement-ly {
				.lyHeader {
					@include orderDisPlay();
					height: 80rpx;
					.title {
						color: #999;
					}
				}

				.lyItem {
					@include orderDisPlay();
					height: 80rpx;
					.title {
						color: #999;
					}

					.info {
						.copy {
							padding: 8rpx 20rpx;
							background-color: #f3f3f3;
							border-radius: 40rpx;
							margin-left: 12rpx;
							font-size: 24rpx;
						}
					}
				}
			}

			.orderManagement-pd {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				padding: 20rpx 0px;
				border-top: 1px #f3f3f3 solid;
				.pd-btn {
					background-color: #f3f3f3;
					color: #444;
					padding: 12rpx 30rpx;
					border-radius: 40rpx;
					font-size: 26rpx;
					margin-left: 20rpx;
				}

				.active {
					background-color: #2979ff;
					color: #fff;
				}
			}
		}
	}
}

.materialFlow-main {
	color: #444;
	.materialFlow-header {
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
	}
	.materialFlow-form{
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
	}
}
</style>